<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
	media="screen and (max-device-width: 799px)" href="mobile-tablet.css" />
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<title>JQuery Mobile</title>
<style type="text/css">
@media all and (min-width: 800px) {
  #nav {
    width: 300px;
    float: left;
    margin-right: 20px;
  }
  #grid {
    width: 450px;
    float: left;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
  #grid {
    width: 100%;
  }
}
</style>
</head>
<body>
	<div data-role="content">
		<ul id="nav" data-role="listview" data-inset="true">
			<li><a href="#">Nav item</a></li>
			<li><a href="#">Nav item</a></li>
			<li><a href="#">Nav item</a></li>
		</ul>

		<div id="grid" class="ui-grid-b">
			<div class="ui-block-a">
				<div class="ui-bar ui-bar-e">A</div>
			</div>
			<div class="ui-block-b">
				<div class="ui-bar ui-bar-e">B</div>
			</div>
			<div class="ui-block-c">
				<div class="ui-bar ui-bar-e">C</div>
			</div>
			<div class="ui-block-a">
				<div class="ui-bar ui-bar-e">A</div>
			</div>
			<div class="ui-block-b">
				<div class="ui-bar ui-bar-e">B</div>
			</div>
			<div class="ui-block-c">
				<div class="ui-bar ui-bar-e">C</div>
			</div>
		</div>
	</div>
</body>
</html>